<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{isAll}}</strong></span>
    <ul class="filters">
      <li>
        <a @click="one" :class="{selected:isl=='all'} " href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="two" :class="{selected:isl=='no'} "  href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="there" :class="{selected:isl=='yes'} " href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="qingchu" >清除已完成</button>
  </footer>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {

  computed: {
    ...mapState(['list', 'isl']),
    ...mapGetters(['isAll'])
  },
  methods: {
    ...mapMutations(['on', 'tw', 'th', 'qing']),
    // 修改state里面的isl要调用mutation里面的方法
    one () {
      this.on()
    },
    two () {
      this.tw()
    },
    there () {
      this.th()
    },
    // 清除已经完成
    qingchu () {
      this.qing()
    }
  }
}
</script>
